<script setup lang="ts">
import router from "@/router";
import { getSvg } from "@/utils/index";
function handleDetail(item: any) {
  console.log(item);
  router.push("/news/detail/" + 44406);
}
const list = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
</script>
<template>
  <div class="mw-01 bg-[#fff] rounded-10 ml-auto mr-auto p-10 mb-14">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="flex flex-col justify-start items-stretch card-list"
      @click="handleDetail(item)"
    >
      <div
        v-if="index % 4 === 0"
        class="mb-10 bg-[url(@/assets/img/image_80@2x.png)] bg-no-repeat bg-cover w-full h-223 flex flex-col justify-end items-stretch"
      >
        <div
          class="w-full h-85 rounded-10 bg-linear-[180deg,rgba(0,0,0,0)_0%,#000000_100%] flex flex-col justify-end items-stretch gap-y-8 px-10 pb-5"
        >
          <p class="font-500 text-13 text-[#fff] lh-16 text-left not-italic">
            {{ item }} --- Kapan Awal Ramadhan 2025 Malaysia, Apa Sama dengan
            Indonesia?
          </p>
          <p
            class="font-400 text-11 text-[#fff] lh-13 not-italic flex flex-row justify-start items-center gap-x-4"
          >
            <span>12-Feb-2025</span>
            <span>·</span>
            <span>Tirto.id</span>
          </p>
        </div>
      </div>
      <div
        v-else
        class="mb-10 pb-10 flex flex-row justify-start items-stretch gap-x-10 border-b-1 border-b-solid border-b-[rgba(178,178,178,0.5)] last-of-type:border-b-[#F7F7F7] card-item"
      >
        <img
          class="w-120 h-100 object-cover rounded-10"
          :src="getSvg('Component_4')"
          alt=""
        />
        <div class="flex flex-col justify-between items-stretch py-6">
          <p
            class="font-500 text-14 text-[#000000] lh-16 text-left not-italic text-ellipsis-4"
          >
            {{ item }} --- Thibbun Nabawi: I’tikaf untuk Perkuat Imunitas
          </p>
          <p
            class="font-400 text-12 text-[#6D6D6D] lh-14 not-italic flex flex-row justify-start items-center gap-x-4"
          >
            <span>12-Feb-2025</span>
            <span>·</span>
            <span>Tirto.id</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card-list {
  &:last-of-type {
    .card-item {
      &:last-of-type {
        @apply border-b-none mb-0 pb-0;
      }
    }
  }
}
</style>
